<template>
  <div class="live">
    <p>直播管理</p>
    <div class="live-box">
      <p>
        <span>直播状态:</span>
        <select v-model="value1"  @click="liveState(value1)">
          <option v-for="(item,index) in select1" :key="index">{{item}}</option>
        </select>
        <span>{{value1}}</span>
        <span>经纪人搜索:</span>
        <input type="text" placeholder="姓名、ID" v-model="value"  @input="liveCheck(value)"/>
      </p>

      <div class="live-list">
        <p>全部直播</p>
        <div class="list" v-for="(item,index) in list" :key="index">
          <dl>
            <dt><img :src="item.url" alt="" @click="liveDetail()"></dt>
            <dd>
              <p>{{item.tit}}</p>
              <p>{{item.name}}  {{item.time}}</p>
              <p><span @click="Detail(item.id)">{{item.access}}</span><span>{{item.del}}</span> <van-switch v-model="item.flag" /></p>
            </dd>
            <span class="state">{{item.state}}</span>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "live",
  data() {
    return {
      value:"",
      value1: "请选择",
      select1: ["请选择", "直播中", "已结束"],
      // currentPage: 1,
      list: [],
       checked: true,
    };
  },
  created() {
    //调用函数
    this.getList();
  },
  methods: {
    //渲染列表数据
    getList() {
      axios({
        url: "/api/LiveList"
      }).then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data;
        } else {
          this.$router.push(`/login`);
        }
      });
    },

    //直播状态筛选
    liveState(value1){
      axios({
        url:'/api/liveState',
        method:'post',
        data:{
          value1:value1
        }
      }).then(res => {
         if(res.data.code === 1){
           this.getList()
         }else{
           this.list = res.data.data;
         }
      })
    },

    //搜索
    liveCheck(value) {
      axios({
        url:'/api/liveCheck',
        method:'post',
        data:{
          value:value
        }
      }).then(res => {
        this.list = res.data.data;
      })
    },

    //点击进入详情页
    Detail(id){
      this.$router.push(`/Detail/${id}`)
    },

    //点击进入直播
    liveDetail(){
      this.$router.push(`/Streamdetail`)
    }
  }
};
</script>

<style>
.live {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.live > p {
  margin-left: 3%;
  font-size: 20px;
  display: inline-block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
}

.live .live-box {
  width: 94%;
  height: 90%;
  background-color: white;
  border-radius: 20px;
  margin-left: 3%;
  margin-top: 1%;
}

.live .live-box > p {
  display: inline-block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
}

.live .live-box > p span {
  color: #b3b3b3;
  font-size: 18px;
  margin-left: 20px;
}

.live .live-box > p select {
  width: 200px;
  height: 25px;
  outline: none;
}

.live .live-box > p input {
  width: 200px;
  height: 25px;
  outline: none;
}

.live .live-box .live-list {
  margin-top: 20px;

}

.live .live-box .live-list > p {
  display: inline-block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  margin-left: 20px;
}

.live .live-box .live-list .list {
  float: left;
  width: 16%;
  height: 170px;
  margin-top: 10px;
}

.live .live-box .live-list .list dl {
  width: 200px;
  height: 170px;
  /* border: 1px solid #ccc; */
  margin: 0 auto;
  position: relative;
}

.live .live-box .live-list .list dl dt{
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
}

.live .live-box .live-list .list dl dt img{
  width: 100%;
  height: 100%;
}

.live .live-box .live-list .list dl dd p{
  font-size: 14px;
  color: #b3b3b3;
  padding: 1px 0;
  margin: 0;
}

.live .live-box .live-list .list dl dd p span{
  color: deepskyblue;
  vertical-align: middle;
}

.live .live-box .live-list .list dl dd p .van-switch {
  width: 40px;
  height: 20px;
  vertical-align: middle;
  float: right;
  margin-right: 10px;
}

.live .live-box .live-list .list dl dd p .van-switch--on{
   width: 50px;
  height: 20px;
}

.live .live-box .live-list .list dl dd p .van-switch__node{
  width: 20px;
  height: 20px;
}

.live .live-box .live-list .list dl .state{
  position: absolute;
  top: 75px;
  left: 4px;
  display: inline-block;
  background-color: rgba(0, 0, 0, .3);
  width: 60px;
  height: 20px;
  text-align: center;
  border-radius: 6px;
  color: white;
}
</style>